import React, { useState } from 'react';
import { Tabs, Card } from 'antd';
import ApplicationView from './ApplicationView';
import UnitView from './UnitView';

// 功能开关配置
const FEATURE_FLAGS = {
    SHOW_UNIT_VIEW: true, // 设置为 true 来显示单元视图
};

const { TabPane } = Tabs;

const MetricsAnalysis: React.FC = () => {
    const [activeTab, setActiveTab] = useState('applications');

    return (
        <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
            <Card 
                title="度量指标" 
                style={{ marginBottom: '24px' }}
                bodyStyle={{ padding: '0' }}
            >
                <Tabs 
                    activeKey={activeTab} 
                    onChange={setActiveTab}
                    size="large"
                    style={{ padding: '0 24px' }}
                >
                    <TabPane tab="应用视图" key="applications">
                        <ApplicationView />
                    </TabPane>
                    {FEATURE_FLAGS.SHOW_UNIT_VIEW && (
                        <TabPane tab="单元视图" key="units">
                            <UnitView />
                        </TabPane>
                    )}
                </Tabs>
            </Card>
        </div>
    );
};

export default MetricsAnalysis;